<template>
  <div class="main_con">
    <h2>值班记录</h2>
    <!-- <div style="text-align: left">
   

      <el-select v-model="selectedShift" placeholder="请选择">
        <el-option
          v-for="item in eventData"
          :key="item.id"
          :label="item.shiftsname"
          :value="item.shiftsname"
        ></el-option>
      </el-select> -->
    <!-- <el-button
        type="success"
        plain
        style="margin-left: 10px"
        @click="search(selectedShift)"
      >
        查询
      </el-button>
      <el-divider></el-divider>
    </div>  -->

    <div style="display: flex">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 50px;
          margin-top: 47px;
        "
      >
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>
        <div class="div1" style="width: 100px; height: 125px">
          <div class="dives" style="background-color: #fff">班次</div>
          <div class="dives" style="background-color: #fef0f0; color: #f26c6c">
            夜班
          </div>
          <div class="dives" style="background-color: #fdf6ec; color: #e6a23c">
            日班
          </div>
          <div class="dives" style="background-color: #ecf5ff; color: #409eff">
            中班
          </div>
        </div>

        <!-- <el-table :data="eventData" style="width: 100%; padding-top: 64px; ">
          <el-table-column label="班次信息"></el-table-column>
        </el-table> -->
        <!-- style="display: flex;flex-direction: column;align-items: center;padding-top:50px ;margin-top: 47px;" -->
      </div>
      <el-calendar
        :first-day-of-week="1"
        :day-nums="17"
        v-model="value"
        style="padding: 0px"
      >
        <template #date-cell="{ data }">
          <div style="width: 100%; display: flex; flex-direction: column">
            <div>
              <span>
                {{ data.day.split('-').slice(1).join('-') }}
                {{ data.isSelected ? '✔️' : '' }}
              </span>
            </div>
            <div>
              <div style="background: #fef0f0; height: 30px">
                <template v-for="item in eventData" :key="item.id">
                  <el-tag
                    style="width: 100%"
                    @click="dialogTableVisibl(item)"
                    v-if="StartDate(item.starttime, data)"
                    :type="getTagType(item.shifttype)"
                  >
                    {{ item.officerondut }}
                  </el-tag>
                  <br
                    v-if="
                      index < eventData.length - 1 &&
                      item.shifttype !== eventData[index + 1].shifttype
                    "
                  />
                </template>
              </div>
              <div style="background: #fdf6ec; height: 30px"></div>
              <div style="background: #ecf5ff; height: 30px"></div>
            </div>
          </div>
          <!-- <div style="width: 100%;">
            <template v-for="(item, index) in eventData">

              <el-tag style="width: 100%;" @click=" dialogTableVisibl(item)"
                v-if="item.starttime === date.toISOString().slice(0, 10)" :key="item.id"
                :type="getTagType(item.shifttype)">
                {{ item.officerondut }}
              </el-tag>

              <br v-if="index < eventData.length - 1 && item.shifttype !== eventData[index + 1].shifttype" />
            </template>
          </div> -->
        </template>
      </el-calendar>
      <el-dialog title="交接日志信息" v-model="dialogTableVisible" height="400">
        <el-table :data="gridData" height="500" width="800">
          <el-table-column
            property="id"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column
            property="shiftsid"
            label="班次编号"
            width="80"
          ></el-table-column>
          <el-table-column
            property="handovertime"
            label="日期"
            width="80"
          ></el-table-column>
          <el-table-column
            property="handoverpersonnel"
            label="交班人员"
            width="80"
          ></el-table-column>
          <el-table-column
            property="takeoverpersonnel"
            label="接班人员"
            width="80"
          ></el-table-column>
          <el-table-column
            property="waterintake"
            label="取水量"
            width="80"
          ></el-table-column>
          <el-table-column
            property="watersupply"
            label="供水量"
            width="80"
          ></el-table-column>
          <el-table-column
            property="electricityconsumption"
            label="耗电比"
            width="80"
          ></el-table-column>
          <el-table-column
            property="watersupplyratio"
            label="取供比"
            width="80"
          ></el-table-column>
          <el-table-column
            property="electricitywaterratio"
            label="供水耗电"
            width="80"
          ></el-table-column>
          <el-table-column
            property="handoverontes"
            label="交接备注 "
            width="80"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import { getlist, getbyidlist } from '@/api/userApi'
import { getListData, getByIdData } from '../http/http'

export default {
  name: 'PatrolSchedule',
  data() {
    return {
      selectedShift: null,
      value: new Date(),
      eventData: [],
      gridData: [],
      dialogTableVisible: false,
    }
  },
  methods: {
    //日期上显示的内容
    StartDate(starttime, date) {
      if (starttime === date.day) {
        return true
      }
    },
    search(selectedShift) {
      // 在这里执行查询操作，可以使用selectedShift作为参数
      console.log('执行查询操作，所选班次为:', selectedShift)
    },

    dialogTableVisibl(item) {
      this.shiftsid = item.id
      this.dialogTableVisible = true
      this.getbyidlistData()

      // this.shiftsid
    },
    getTagType(shiftType) {
      if (shiftType === '1') {
        return 'danger' // 红色背景
      } else if (shiftType === '2') {
        return 'warning' // 黄色背景
      } else if (shiftType === '3') {
        return 'primary' // 蓝色背景
      } else {
        //如果shiftType为null同样渲染上面三种颜色
        if (shiftType == null) {
          return this.getNextColor() // 默认的循环颜色
        }
      }
    },

    getNextColor() {
      const color = this.defaultColors[this.colorIndex]
      this.colorIndex = (this.colorIndex + 1) % this.defaultColors.length // 循环选择颜色
      return color
    },
    fetchData() {
      getListData()
        .then((res) => {
          // console.log("响应成功", res);
          if (res.data) {
            this.eventData = res.data.data.map((item) => ({
              id: item.id,
              shiftid: item.shiftid,
              shiftname: item.shiftname,
              starttime: item.starttime,
              endtime: item.endtime,
              shifttype: item.shifttype,
              staffingrequirements: item.staffingrequirements,
              officerondut: item.officerondut,
              shiftdescription: item.shiftdescription,
            }))
            // 排序
            this.eventData.sort((a, b) => a.shifttype - b.shifttype)
          }
        })
        .catch((error) => {
          console.error('请求失败', error)
        })
    },
    getbyidlistData() {
      getByIdData({ id: this.shiftsid })
        .then((res) => {
          // console.log("响应成功", res);
          if (res.data) {
            this.gridData = res.data.data.map((item) => ({
              id: item.id,
              shiftsid: item.shiftsid,
              handovertime: item.handovertime,
              handoverpersonnel: item.handoverpersonnel,
              takeoverpersonnel: item.takeoverpersonnel,
              waterintake: item.waterintake,
              watersupply: item.watersupply,
              electricityconsumption: item.electricityconsumption,
              electricitywaterratio: item.electricitywaterratio,
              watersupplyratio: item.watersupplyratio,
              handoverontes: item.handoverontes,
            }))
          }
        })
        .catch((error) => {
          console.error('请求失败', error)
        })
    },
  },
  mounted() {
    this.fetchData()
  },
}
</script>

<style>
.el-icon-s-order {
  text-align: right;
  color: #1e90ff;
}

.div1 {
  border: solid #ebeef5 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 31px;
  text-align: center;
  font-size: 14px;
}

.dives {
  width: 82px;
}

.el-table__row {
  height: 125px !important;
}

.el-calendar-day {
  height: 125px !important;
}

.is-selected {
  color: #1989fa;
}

.el-tag {
  display: block;
  width: 100px;
  height: 31px !important;
  /* margin-bottom: 0.5%; */
}

.el-calendar__body {
  padding: 0px !important;
}

.el-calendar-table .el-calendar-day {
  text-align: center;
  line-height: 25px;
}
</style>
